// 结单
<template>
  <div class="page">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img class="arrow" src="@/assets/xiangmujindu/arrow_right.png" style="width: 22px;margin-left: 10px; transform: rotate(180deg);" />
        </button>
        <h2>结单</h2>
      </div>
      <!-- Tab 切换 -->
      <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: activeTab === index }]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div>
    </div>

    <div class="context">
      <!-- 区域1 -->
      <div class="section">
        <!-- 第一部分：表格 -->
        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th :style="{ width: '40%' }">实验类型/二级类型</th>
                <th :style="{ width: '20%' }">需求数量</th>
                <th :style="{ width: '10%' }">实际施工数量</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
                <td>{{ row.type }}</td>
                <td>{{ row.demand }}</td>
                <td>
                  <div class="input-group">
                    <button @click="decrement(rowIndex)">-</button>
                    <input
                      type="number"
                      v-model.number="row.actual"
                      @input="updateActual(rowIndex)"
                    />
                    <button @click="increment(rowIndex)">+</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 第二部分：备注信息 -->
        <div class="notes">
          <h2>备注信息</h2>
          <textarea placeholder="请输入" v-model="notes"></textarea>
        </div>
      </div>

      <!-- 区域2 -->
      <button class="submit-button" @click="submit">提交结单</button>
    </div>
    <!-- 提醒 -->
    <div v-if="qdSureToastVisi" style="position: fixed;top: 0;left: 0; width: 100vw;height: 100vh;">
      <p style="background-color: #000;color: #fff; margin: 70% auto;width: 80vw;text-align: center;padding: 10px 20px;border-radius: 10px;">
        提交成功
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [
        { type: "整机柜（空柜上架）1U/2U", demand: "11", actual: 11 },
        { type: "新购标准服务器上架3U/4U", demand: "15", actual: 15 },
        { type: "新购标准服务器入库1U/2U/4U", demand: "10", actual: 10 },
      ],
      // 备注信息
      notes: "",
      qdSureToastVisi: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 减少实际施工数量
    decrement(rowIndex) {
      if (this.tableData[rowIndex].actual > 0) {
        this.tableData[rowIndex].actual--;
      }
    },
    // 增加实际施工数量
    increment(rowIndex) {
      this.tableData[rowIndex].actual++;
    },
    // 更新实际施工数量
    updateActual(rowIndex) {
      if (this.tableData[rowIndex].actual < 0) {
        this.tableData[rowIndex].actual = 0;
      }
    },
    // 提交结单
    submit() {
      this.qdSureToastVisi = true;
      setTimeout(() => {
        this.qdSureToastVisi = false
        this.Index = -1

        this.$router.go(-1)
      }, 2000);
      
    },
  },
};
</script>

<style scoped>
/* 页面样式 */
.page {
  font-size: 13px;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
  background: #f4f5f9;
}

/* 区域1 */
.section {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}

/* 表格样式 */
.table-container {
  margin-bottom: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background-color: #f0f6e8;
  text-align: left;
  padding: 10px 0px;
}
td {
  padding: 5px;
  border-bottom: 1px solid #e0e0e0;
}
.input-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input-group button {
  /* background-color: #98c355; */
  color: #98c355;
  font-size: 16px;
  border: 1px solid #ccc;
  /* padding: 1px 8px; */
  cursor: pointer;
  height: 23px;
}
.input-group input {
  width: 50px;
  text-align: center;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  outline: none;
  height: 23px;
  margin-left: -1px;
  margin-right: -2px;
}
/* .input-group button:first-child {
  border-right: none;
}
.input-group button:last-child {
  border-left: none;
} */

/* 备注信息 */
.notes h2 {
  margin-bottom: 10px;
}
textarea {
  width: 100%;
  height: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
}

/* 提交按钮 */
.submit-button {
  width: 100%;
  background-color: #98c355;
  color: white;
  padding: 16px 20px;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  cursor: pointer;
}
.submit-button:hover {
  background-color: #86b04a;
}
th, td {
  border: 1px solid #ccc;
}

</style>
